<template>
	<view>
		<!-- 海报 -->
		<view class="top-block">
			<view class="text-white text-center text-lg">你的专属邀请码</view>
			<view class="code-wrap">
				<view class="code margin text-white text-center text-sl text-bold">{{invite_code}}</view>
			</view>

			<view class="qrimg">
				<qrcode onval class="qrcode-wrap" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
				 :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake"
				 :usingComponents="true"></qrcode>
			</view>

			<view class="btn-wrap margin-top-xl flex justify-around">
				<view class="btn" @click="creatPoster">生成海报</view>
				<view class="btn" @click="share">分享链接</view>
			</view>
			<view class="margin text-center" @click="$goto('/pages/mine/team')">查看我的团队</view>
		</view>

		<!-- 海报 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<image :src="poster" class="poster" mode="aspectFit"></image>
				<view>
					<view class="margin bg-black cu-btn lg round" @click="download">
						保存
					</view>
					<view class="margin cu-btn lg round" @click="hideModal">
						取消
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分享 -->
		<view class="cu-modal" :class="modalName=='Share'?'show':''" @click="hideModal">
			<view class="cu-dialog" @click.stop="">
				<view class="padding">
					<textarea :value="shareUrl" disabled class="share-area" />
				</view>
				<view>
					<view class="margin bg-black cu-btn lg round" @click="copyUrl">
						复制
					</view>
					<view class="margin cu-btn lg round" @click="hideModal">
						取消
					</view>
				</view>
			</view>
		</view>

		<!-- 政策 -->
		<view class="padding bg-white zhengce">
			<view class="text-black text-bold margin-bottom-sm">推广政策及攻略</view>
			<view class="text-content text-sm">
				将推荐码分享给好友，对方在智惠云商城APP登录后输入后即可成为你的下线！
			</view>
			<view class="text-content text-sm">
				每成功邀请一位好友，并购买会员，你可获得相应的直推奖励！
			</view>
			<view class="text-content text-sm">
				不同会员等级的奖励不同，等级越高，奖励越丰厚！
			</view>
		</view>
	</view>
</template>

<script>
	import qrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import thorui from '@/components/tui-clipboard/tui-clipboard.js'
	export default {
		components: {
			qrcode
		},
		data() {
			return {
				modalName: null,
				poster: '',
				shareUrl: '',
				val: '',
				size: 250, // 二维码大小
				unit: 'upx', // 单位
				background: '#fff', // 背景色
				foreground: 'black', // 前景色
				pdground: 'black', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				invite_code: ''
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			},
			getData() {
				this.$u.get('/user/share').then(res => {
					this.invite_code = res.data.result.invite_code
					this.poster = res.data.result.share
					this.shareUrl = res.data.result.url
					this.val = res.data.result.url
				})
			},
			share() {
				this.modalName = 'Share'
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			creatPoster() {
				this.modalName = 'Modal'
			},
			copyUrl() {
				let that = this
				thorui.getClipboardData(this.shareUrl, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						that.$msg('复制成功')
					} else {
						that.$msg('复制失败')
					}
					// #endif
				})
			},
			download() {
				// #ifdef H5
				console.log('h5')
				window.open(`${this.poster}`)
				// #endif

				// #ifndef H5
				console.log('not h5')
				uni.downloadFile({
					url: this.poster,
					success: res => {
						uni.saveImageToPhotosAlbum({
							sourceType: ['album', 'camera'],
							filePath: res.tempFilePath,
							success: res => {
								console.log('???')
								uni.showToast({
									"title": "保存成功",
									duration: 2000
								})
							},
							fail: res => {
								console.log(res)
							}
						})
					}
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cu-modal {
		z-index: 999;
	}
	.poster {
		height: 60vh;
	}
	.share-area {
		width: 100%;
		height: 200rpx;
		background-color: rgba(179,199,230,0.2);
		padding: 16rpx;
	}

	.top-block {
		height: 900rpx;
		padding-top: 100rpx;
		background-image: url(../../static/images/tab3bg.png);
		background-size: 100% auto;

		.code-wrap {
			padding: 0 80rpx;
			padding-top: 10rpx;

			.code {
				letter-spacing: 2rpx;
				border-bottom: 1px dashed #333333;
				padding-bottom: 30rpx;
			}
		}

		.btn-wrap {
			width: 100%;
			padding: 0 80rpx;

			.btn {
				width: 250rpx;
				height: 80rpx;
				color: rgb(208, 132, 21);
				letter-spacing: 2rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
			}
		}

		.qrimg {
			display: flex;
			justify-content: center;

			.qrcode-wrap {
				padding: 20rpx;
				background-color: #fff;
			}
		}
	}

	.zhengce {
		.text-content {
			padding-left: 16rpx;
			position: relative;

			&::before {
				content: '*';
				width: 16rpx;
				height: 100%;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(0, -50%);
			}
		}
	}
</style>
